{% extends "base.html" %}

{% block title %}变异特征分析 - 滩羊疫病监测系统{% endblock %}

{% block extra_css %}
<style>
.chart-container {
    position: relative;
    height: 300px;
    margin-bottom: 1.5rem;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">变异特征分析</h1>
        <a href="{{ url_for('pathogen.generate_report') }}" class="btn btn-primary">
            <i class="bi bi-file-earmark-text"></i> 生成分析报告
        </a>
    </div>

    <div class="row">
        <!-- 左侧图表 -->
        <div class="col-md-6">
            <!-- 序列相似度分析 -->
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">序列相似度分析</h5>
                    <div class="chart-container">
                        <canvas id="similarityChart"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 碱基组成分析 -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">碱基组成分析</h5>
                    <div class="chart-container">
                        <canvas id="baseCompositionChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧内容 -->
        <div class="col-md-6">
            <!-- 时间序列变异分析 -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">时间序列变异分析</h5>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>病原体类型</th>
                                    <th>采样时间</th>
                                    <th>变异率</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for type, variations in time_variations.items() %}
                                    {% for v in variations %}
                                    <tr>
                                        <td>{{ type }}</td>
                                        <td>{{ v.date }}</td>
                                        <td>{{ "%.1f"|format(v.diff_rate * 100) }}%</td>
                                    </tr>
                                    {% endfor %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 变异统计摘要 -->
                    <div class="mt-4">
                        <h6>变异统计摘要</h6>
                        <div class="row">
                            {% for type, variations in time_variations.items() %}
                            <div class="col-md-6 mb-3">
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="card-title">{{ type }}</h6>
                                        <p class="mb-1">样本数: {{ variations|length }}</p>
                                        {% if variations %}
                                        {% set rates = variations|map(attribute='diff_rate')|list %}
                                        <p class="mb-1">平均变异率: {{ "%.1f"|format((rates|sum / rates|length * 100)|default(0)) }}%</p>
                                        <p class="mb-1">最大变异率: {{ "%.1f"|format((rates|max * 100)|default(0)) }}%</p>
                                        <p class="mb-0">最小变异率: {{ "%.1f"|format((rates|min * 100)|default(0)) }}%</p>
                                        {% else %}
                                        <p class="mb-0">暂无数据</p>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Chart.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>

<script>
// 初始化序列相似度图表
function initSimilarityChart() {
    const ctx = document.getElementById('similarityChart').getContext('2d');
    const similarityStats = JSON.parse('{{ similarity_stats|tojson|safe }}');
    
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: Object.keys(similarityStats),
            datasets: [
                {
                    label: '平均相似度',
                    data: Object.values(similarityStats).map(stat => stat.avg),
                    backgroundColor: '#36A2EB'
                },
                {
                    label: '最小相似度',
                    data: Object.values(similarityStats).map(stat => stat.min),
                    backgroundColor: '#FF6384'
                },
                {
                    label: '最大相似度',
                    data: Object.values(similarityStats).map(stat => stat.max),
                    backgroundColor: '#4BC0C0'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 1,
                    ticks: {
                        callback: function(value) {
                            return (value * 100).toFixed(0) + '%';
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': ' + 
                                   (context.parsed.y * 100).toFixed(1) + '%';
                        }
                    }
                }
            }
        }
    });
}

// 初始化碱基组成图表
function initBaseCompositionChart() {
    const ctx = document.getElementById('baseCompositionChart').getContext('2d');
    const baseCompositions = JSON.parse('{{ base_compositions|tojson|safe }}');
    const types = Object.keys(baseCompositions);
    const bases = ['A', 'T', 'C', 'G'];
    
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: types,
            datasets: bases.map((base, index) => ({
                label: base,
                data: types.map(type => baseCompositions[type][base] || 0),
                backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'][index]
            }))
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: {
                    stacked: true
                },
                y: {
                    stacked: true,
                    beginAtZero: true,
                    max: 1,
                    ticks: {
                        callback: function(value) {
                            return (value * 100).toFixed(0) + '%';
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': ' + 
                                   (context.parsed.y * 100).toFixed(1) + '%';
                        }
                    }
                }
            }
        }
    });
}

// 页面加载完成后初始化图表
document.addEventListener('DOMContentLoaded', function() {
    initSimilarityChart();
    initBaseCompositionChart();
});
</script>
{% endblock %} 